/**
  CSS语法: 选择器｛属性:属性值｝
  选择器分类：
  》类选着器,以.类名形式定义，eg: .demo{color:red;}
  ----使用:标签下，定义一个class属性来引用，eg:<p class="demo">....</p>
  ----可以使用多个样式，选择器之间用空格隔开eg: <p class="demo1 demo2">....</p>
  》id选着器：
  ----更具元素id定义选着器，以#开头，具备唯一性。eg: #demo｛color:red｝
  ----使用，在标签下，用id属性来使用。eg:<p id="demo">....</p>
  》标签选着器：
  ----以标签名来定义选着器，引用了该样式的html中，所有该标签均使用该样式
  》伪类选着器：
  ----用于超链接上：
  ----eg:
  a{
     text-decoration:none;
  }
  a:link{color:gray}
  a:visited{color:red}
  a:hover{color:orange}
  a:active{color:blue}

  》后代选着器
  ----根据元素的是那个下文关系来定义选着器。eg: #demo p{color:green;}

  》通用选择器：
  ----用*表示。eg:*{font-size:12px}
  ----表示所有字体均是 12px;

  》并集选着器
  ----多个选着器共用一个定义,。eg: p,li,td{line-height:20px;color:#000000}

  ------------------------------------------------------------------------------
  合尺寸：
  property:value1; 表示所有边都是一个值value1；
  property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
  property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
  property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

*/

/**
  标签名形式;//引用该CSS的网页中所有p标签均应用该样式
*/
/**
文本样式属性：
 font-size:   //字体大小
 font-family:   //字体类型
 font-style:    //字体样式
 color:        //字体颜色
 text-align:  //文本对齐
*/
p{
   text-align:center;
   color:red;
   font-family:"隶书";
   font-size:13px;
}

/**
   .类名形式,定义CSS(引用形式 在引用的标签里添加属性class="list")
*/
.title{
	color: red;
	font-family:"宋体";
	font-size: 20px;

}

.code{
   background-color:orange;
   color:red;
}

.img{
  width:100%;
  height:200px;
}


/**
背景样式属性：
background-color:   //
background-image:   //
background-repeat:   //可取值repeat-x(x方向平铺)  repeat(x\y方向平铺) no-repeat（背景图不平铺） repeat-y（y方向平铺）
*/

.table{
   width:100%;
   height:200px;

}

.divideLine{
  size:10px;
  width:100%;
  color:red;
}

/**
方框样式属性：
》外边距：
margin-top:
margin-left:
margin-right:
margin-bottom:

》边框属性：
border-style:  //边框样式  border-方位-style:   //实线 虚线等
border-width:  //边框宽度  border-方位-width:  //border-right-width:5px;  //设置右边框颜色
border-color:  //边框颜色  border-方位-color:   //注意 该标签与border标签不对等
内边距：
padding-top:
padding-left:
padding-right:
padding-bottom:

*/

.form{
   width:100%;
   background-color:#999999;
   border-style:solid;
   border-width:1px;
   border-color:red;
}

.box{
 border-color:yellow;
 border-style:solid;
 margin:1px;
}


.input{
   width:75%;
   border-style:solid;
   border-width:1px;
   border-color:orange;
}

.submit{
    border-style:solid;
    border-width:1px;
    border-color:orange;
    margin-left:50px;
    margin-right:25px
    margin-bottom:5px;
    width:40px;
    height:20px;
    font-size:13px;
}

.reset{
   border-style:solid;
   border-width:1px;
   border-color:gray;
   margin-left:25px;
   margin-right:50px;
   margin-bottom:5px;
   width:40px;
   height:20px;
   font-size:13px;
}

.button{
    border-style:solid;
    border-width:1px;
    border-color:orange;
    font-size:13px;
    background-image:url(../img/avatar.jpg);

}

.listItem{
   margin:1px;
   border-style:solid;
   border-width:1px;
   border-color:red;
}

.listIcon{
   width:80px;
   height:80px;
}

/**
》id的形式引用样式
*/
#iframe{
 margin:1px;
   border-style:solid;
   border-width:1px;
   border-color:red;
   width:100%;
   height:200px;
}

/**
 超链接样式
 a:link{color:gray} //未访问链接
 a:visited{color:red} //已访问链接
 a:hover{color:orange} //鼠标移到链接上
 a:active{color:blue} //鼠标点击链接
 text-decoration:none; //无下划线链接
*/
a{
   text-decoration:none;
}
a:link{color:gray}
a:visited{color:red}
a:hover{color:orange}
a:active{color:blue}

/**
按钮样式：
background-image:
margin:
border:
padding:
height:
width:
font-size:
*/


/**
div样式：
line-height:   //若将div内容垂直居中，则将该值设为height值

margin: 0 auto;  //div居中
*/

/**
 其它属性：
  》float:
  ----定义元素向哪个方向浮动;
  ----在css中所有元素均可使用该属性;
  ----(left 向左浮动 right 向右浮动 none 默认值，显示在文本中出现的位置 inherit 继承父元素的float属性)

*/
